<template>
  <view class="page-reset">
    <template v-if="step === 1">
      <view class="r-item">
        <a-input class="i-input" placeholder="请输入手机号码" trim clearable v-model="form.mobile">
          <template v-slot:prefix>
            <icon class="iconfont icon-prefix">&#xe614;</icon>
          </template>
        </a-input>
      </view>
      <view class="r-item">
        <a-input placeholder="请输入验证码" trim clearable v-model="form.verifyCode">
          <template v-slot:prefix>
            <icon class="iconfont icon-prefix">&#xe634;</icon>
          </template>
        </a-input>
        <view class="i-btn_code" :style="{color: color}" @tap="sendVerifyCode">{{ btnText }}</view>
      </view>
      <view class="r-tips" v-if="form.verifyCode && verifyCodeStatus && form.verifyCode !== targetVerifyCode">
        *验证码错误，请重新发送或输入</view>
      <view class="r-btns">
        <view class="b-btn" :class="(form.verifyCode && verifyCodeStatus) ? 'active': '' " @tap="goNextStep">下一步</view>
      </view>
    </template>
    <template v-else>
      <view class="r-item">
        <a-input class="i-input" placeholder="请设置新的密码" trim clearable v-model="form.pwd">
          <template v-slot:prefix>
            <icon class="iconfont icon-prefix">&#xe602;</icon>
          </template>
        </a-input>
      </view>
      <view class="r-item">
        <a-input class="i-input" placeholder="请再次设置密码" trim clearable v-model="form.secondPwd">
          <template v-slot:prefix>
            <icon class="iconfont icon-prefix">&#xe602;</icon>
          </template>
        </a-input>
      </view>
      <view class="r-tips">6-16位密码、数字或字母组成</view>
      <view class="r-btns">
        <view class="b-btn" :class="isResetBtnActive ? 'active': '' " @tap="submitReset">确认修改并登录</view>
      </view>
    </template>
    <van-toast id="van-toast" />
  </view>
</template>

<script>
  import {
    model
  } from '@/model';
  const {
    Request
  } = model;
  const {
    Member
  } = model.collection;
  export default {
    data() {
      return {
        step: 1,
        request: new Request(),
        interval: null,
        form: {
          mobile: '',
          pwd: '',
          secondPwd: '',
          verifyCode: '',
        },
        targetVerifyCode: '',
        verifyCodeStatus: false,
        isSending: false,
        currentTime: 60,
        btnText: '获取验证码',
        color: '#db187c'
      }
    },
    computed: {
      isResetBtnActive() {
        if (this.form.pwd && this.form.secondPwd) return true
        return false
      }
    },
    methods: {
      goNextStep() {
        if (!this.form.mobile) return this.toast('请输入手机号码')
        if (!this.form.verifyCode) return this.toast('请输入验证码')
        if (this.verifyCodeStatus && this.targetVerifyCode === this.form.verifyCode) {
          this.step = 2;
          this.setNavTitle('重置密码');
        }
      },
      sendVerifyCode() {
        if (!this.form.mobile) return this.toast('请输入手机号码!');
        if (this.form.mobile.length !== 11) return this.toast('手机号码格式错误');
        if (this.isSending) {
          return;
        }
        this.request.do('open', 'verify', 'mobileCode', {
          params: {
            app: 'portal',
            bizType: 1,
            mobile: this.form.mobile
          },
          data: {}
        }).then((res) => {
          const {
            status,
            data
          } = res;
          this.verifyCodeStatus = status;
          if (status) {
            this.toast('发送验证码成功!');
            this.isSending = true;
            this.targetVerifyCode = data;
            this.interval = setInterval(() => {
              this.currentTime--;
              this.btnText = this.currentTime + 's';
              if (this.currentTime <= 0) {
                clearInterval(this.interval);
                this.btnText = '重新发送';
                this.currentTime = 60;
                this.isSending = false;
                this.color = '#235CFF';
              }
            }, 1000);
          } else {
            this.interval && clearInterval(this.interval)
            this.toast('发送失败')
          }
        });
      },
      submitReset() {
        if (!this.form.pwd || !this.form.secondPwd) return this.toast('请设置密码')
        if (this.form.secondPwd !== this.form.pwd) return this.toast('两次输入的密码不一致')
        uni.showModal({
          title: '确认重置密码',
          success: (res) => {
            if (res.confirm) {
              let form = {
                verifyCode: this.form.verifyCode,
                mobile: this.form.mobile,
                passwd: this.form.pwd
              }
              Member.sendApi('resetPasswd', {
                params: {},
                data: form
              }).then(res => {
                const {
                  status
                } = res;
                if (status) {
                  this.toast('密码修改成功')
                  this.back()
                } else {
                  this.toast('修改失败')
                }
              })
            }
          }
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .page-reset {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;

    .r-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 650rpx;
      height: 120rpx;
      margin-top: 40rpx;
      padding: 0 20rpx;
      background: #F7F7FB;

      .icon-prefix {
        width: 60rpx;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
        color: #999;
      }

      .i-input {
        width: 100%;
      }

      .i-btn_code {
        position: relative;
        width: 150rpx;
        padding: 0 4rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        border-radius: 15rpx;
        font-size: 26rpx;
        z-index: 99;

        &::before {
          position: absolute;
          content: '';
          top: 15rpx;
          left: -20rpx;
          width: 2rpx;
          height: 34rpx;
          background: #c0c0c0;
        }
      }
    }

    .r-tips {
      width: 690rpx;
      text-align: left;
      font-size: 24rpx;
      color: #FF486A;
    }

    .r-btns {
      .b-btn {
        margin-top: 60rpx;
        width: 690rpx;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        border-radius: 6rpx;
        color: #fff;
        background-color: #EDEDED;
      }

      .active {
        background-color: #db187c;
      }
    }

  }
</style>